<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>history api study</title>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<div class="container">
		<a href="?adr=t1.json">11</a>
		<a href="?adr=t2.json">22</a>
		<a href="?adr=t3.json">33</a>
	</div>
    <div id="cont"></div>

	<script type="text/javascript">
      function loadData(url){  
		  	 $.ajax({
	              type:'get',
	              url:'http://localhost:8078/javascriptstudy/history/json/'+url.split("=")[1],
	              dataType:'json',
	              success:function(data){
	                  //console.log(data);
	                 $("#cont").html(data[0].name);
	              }
	          });
    		  if(location.href.indexOf("?")==-1|| !window.history.state){
    		  	//window.history.replaceState(null,null,location.href.split("?")[0] + "?" + url);
    		  }
      }
      $(".container a").bind("click",function(){
     
          var url = $(this).attr("href").split("?")[1];
          $.ajax({
              type:'get',
              url:'http://localhost:8078/javascriptstudy/history/json/'+url.split("=")[1],
              dataType:'json',
              success:function(data){

                  console.log("绑定事件输出：",data[0].name);
                  $("#cont").html(data[0].name);
              }
          });
          var title=url;

          window.history.pushState({url:url},title,location.href.split("?")[0] + "?" + url);
       	   return false;
       });

      window.addEventListener("popstate",function(e){
      	var state = e.state;console.log(state);
      	if(!state){
           loadData("adr=t1.json");
      	}else{
      		loadData(state.url);
      		//window.history.replaceState({url:state.url},null,location.href.split("?")[0] + "?" + state.url);
      	}
      	
      });
      if(location.href.indexOf("?")==-1){
        loadData("adr=t1.json");
      }else{
      	loadData(location.href.split("?")[1]);
      }
	</script>
</body>
</html>